<template>
  <div>
    <el-dialog title="题目预览" :visible="dialogVisible" :close-on-click-modal="false" @close="dialogClose" @open="reverseDisplay">
        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                        【题型】:{{previewdata.questionType}}题
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                      【编号】:{{previewdata.id}}
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                      【难度】:{{previewdata.difficulty}}
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                      【标签】:{{previewdata.tags}}
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                        【学科】:{{previewdata.subjectName}}
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                      【目录】:{{previewdata.directoryName}}
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                      【方向】:{{previewdata.direction}}
                </div>
            </el-col>

        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="24">
             <div class="grid-content bg-purple">
              【题干】:
             </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
             <div class="grid-content bg-purple">
              {{previewdata.question}}
             </div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24" >
             <div class="grid-content bg-purple" v-if="questiontype==='单选'" >
              单选题 选项：（以下选中的选项为正确答案）
             </div>
             <div class="grid-content bg-purple" v-if="questiontype==='多选'" >
              多选题 选项：（以下选中的选项为正确答案）
             </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple" v-if="questiontype==='单选'">
              <el-radio-group v-model="radio" style="display: flex; flex-flow:column nowrap;align-items: flex-start;">
                <el-radio :label="item.isRight" class="radio" v-for="(item) in options" :key='item.id'>{{item.title}}</el-radio>
              </el-radio-group>
             </div>
             <div class="grid-content bg-purple" v-if="questiontype==='多选'">
                  <el-checkbox-group v-model="checkList" style="display: flex; flex-flow:column nowrap;align-items: flex-start;">
                    <el-checkbox :label="item.isRight" class="radio" v-for="(item) in options" :key='item.id'>{{item.title}}</el-checkbox>

                  </el-checkbox-group>
             </div>

          </el-col>
        </el-row>

        <div class="line" style="margin-top:5px; margin-bottom:8px;"></div>
        <el-row>
          <el-col :span="3">
             <div class="grid-content bg-purple" style="line-height: 36px;">
              【参考答案】:
             </div>
          </el-col>
          <el-col :span="2">
             <div class="grid-content bg-purple">
              <el-button type="danger" size="small" @click="playvideo">视频答案预览</el-button>
             </div>
          </el-col>
        </el-row>
        <!-- 放置播放器 -->
         <video ref="video" class="video-js vjs-default-skin" width="600" height="400" controls v-if="openvideo">
           <source :src="src">

        </video>

        <div class="line" style="margin-top:5px; margin-bottom:8px;"></div>

          <el-row >
          <el-col :span="24">
             <div class="grid-content bg-purple" style="margin-top:8px; margin-bottom:5px;">
              【答案解析】:{{previewdata.answer}}
             </div>
          </el-col>
        </el-row>
        <div class="line"></div>

          <el-row>
          <el-col :span="24">
             <div class="grid-content bg-purple">
              【题目备注】:{{previewdata.remarks}}
             </div>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogClose">关闭</el-button>
        </span>

    </el-dialog>

  </div>
</template>

<script>
import { detail as previewdetailApi } from '@/api/hmmm/questions'
import { questionType as questionTYPE, difficulty } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      checkList: [1],
      rowdata: {},
      previewdata: {},
      questiontype: '',
      radio: 1,
      options: [],
      openvideo: false,
      src: 'https://mo-1314261685.cos.ap-beijing.myqcloud.com/TUOER.mp4',
      player: null

    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    /**
     * 打开视频播放器
     */
    playvideo () {
      this.openvideo = true
    },
    /**
     * 关闭dialog
     */
    dialogClose () {
      this.$emit('update:dialogVisible', false)
      this.openvideo = false
    },
    /**
     * 反显
     */
    reverseDisplay () {
      this.previewdetail()
    },

    /**
     * 封装获取反显数据api
     */
    async previewdetail () {
      const { data } = await previewdetailApi(this.rowdata)
      // console.log(data)
      data.questionType = this.formatterQuestionType(data.questionType)
      this.questiontype = data.questionType
      this.options = data.options
      console.log(this.options)
      data.difficulty = this.formatterDifficulty(data.difficulty)
      data.question = data.question.replace(/<.*?>/ig, '')
      data.answer = data.answer.replace(/<.*?>/ig, '')
      // console.log(data.difficulty)
      this.previewdata = data
    },
    /**
     * 使用枚举值处理题型
     */
    formatterQuestionType (questionType) {
      const result = questionTYPE.find(item => item.value === questionType)
      return result ? result.label : '未知'
    },
    /**
     * 使用枚举处理难度
     */
    formatterDifficulty (previewdifficulty) {
      const result = difficulty.find(item => item.value === previewdifficulty)
      return result ? result.label : '未知'
    }

  }

}
</script>

<style lang='scss' scoped>
  .el-row {
      margin-bottom: 0px;
      &:last-child {
        margin-bottom: 0;

      }
    }
    .el-col {

      border-radius: 4px;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .line{
      float:right;
    width: 100%;
    height: 1px;
    margin-top: -0.5em;
    background:#d4c4c4;
    position: relative;
    text-align: center;
    }
    .radio{
      margin-bottom: 10px;
    }

</style>
